<template>
	<template v-for="(d, index) in doptions" :key="index + '-d'">
		<template v-if="FieldItem?.attrs.attrs.length">
			<el-row class="card_list">
				<el-col v-for="(item, index) in FieldItem?.attrs.attrs" :key="index" :span="item.span" :style="[item.border, item.colStyle, item.padding]">
					<span v-if="item['label'] && item.type !== 'button'" :style="FieldItem?.attrs.labelStyle" style="padding-bottom: 6px">
						{{ item.label }}
					</span>
					<div v-if="item['value']" :style="{ color: FieldItem?.attrs.valueColor }">
						<span
							v-if="item.type !== 'button'"
							:style="{
								color: item.valueColor,
								fontSize: item.fontSize + 'px',
							}"
						>
							{{ { ...d, ...tempItem }[item.value] }}
						</span>
						<el-button
							v-else
							:style="{
								width: item.width + 'px',
								height: item.height + 'px',
								fontSize: item.fontSize + 'px',
								borderRadius: item.radius + 'px',
								lineHeight: item.height + 'px',
								background: item.bagd,
								color: item.valueColor,
							}"
							@click="messageCardBtn(item)"
						>
							{{ { ...d, ...tempItem }[item.value] }}
						</el-button>
					</div>
				</el-col>
			</el-row>
		</template>
		<div v-else style="span-align: center; font-size: 22px">
			<el-image :src="notImage" mode="aspectFill"></el-image>
		</div>
	</template>
</template>

<script setup lang="ts">
import { TablePageType, TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';
import { useRouter } from 'vue-router';
import { calcFieldValue } from '/@/components/Linxyun/custom/CustomCommon/lxy_expression.js';
import Lxy_page_event_remote from '/@/components/Linxyun/custom/CustomCommon/lxy_page_event_remote.js';
import { ElMessage } from 'element-plus';

const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		pageData?: Record<string, any>;
		inputData: Record<string, any>;
		globalData?: Record<string, any>;
		FieldItem: TabFieldType | null;
	}>(),
	{
		FieldItem: null,
	}
);
const { FieldItem, pageData, inputData, globalData } = toRefs(props);
const notImage = new URL('../../../../assets/image/no_data.png', import.meta.url).href;
const doptions = reactive<Record<string, any>>([]);
let { proxy } = <any>getCurrentInstance();
const Router = useRouter();

const messageCardBtn = async (item: Record<string, any>) => {
	if (item && item.event === 'jumpLocation' && item.url !== '') {
		const params = {};
		if (item.params) {
			for (const p of item.params) {
				const key = p.value;
				const val = calcFieldValue(4, key, props.inputData, props.pageData, props.globalData);
				params[key] = val;
			}
		}
		Router.push({
			path: item.url || item.jumpcfg.url,
			query: params,
		});
	} else if (item.event === 'interface') {
		const event = new Lxy_page_event_remote({ url: item.url, params: item.params });
		console.log('[Debug][DealForm]remoteMethod, event', event);
		event.setDataSrc(pageData?.value, props.inputData, globalData?.value);
		const res = await event.callEvent();
		if (!res || !res.code || res.code !== '0000') {
			ElMessage.error('请求错误');
		} else {
			ElMessage.success('请求成功');
		}
	}
};
onMounted(() => {
	setTimeout(async () => {
		await init();
	}, 200);
});
const tempItem = reactive<Record<string, any>>({});
async function init() {
	if (pageData?.value![FieldItem.value?.attrs.arrayBind]) {
		if (FieldItem.value?.attrs.attrs && FieldItem.value?.attrs.attrs.length) {
			FieldItem.value!.attrs.attrs = FieldItem.value?.attrs.attrs.map((item: Record<string, any>) => {
				const obj = {};
				item.padding = {};
				item.top ? (item.padding.paddingTop = item.top + 'px') : (item.padding.paddingTop = 0);
				item.bottom ? (item.padding.paddingBottom = item.bottom + 'px') : (item.padding.paddingBottom = 0);
				item.left ? (item.padding.paddingLeft = item.left + 'px') : (item.padding.paddingLeft = 0);
				item.right ? (item.padding.paddingRight = item.right + 'px') : (item.padding.paddingRight = 0);
				if (/\$.*\}$/g.test(item.value) || /'.*'$/g.test(item.value)) {
					const value = calcFieldValue(4, item.value, props.inputData, props.pageData, props.globalData);
					tempItem[item.value] = [undefined, NaN, null, ''].includes(value) ? item.value : value;
				}
				const arr = item.border.split(':');
				obj[arr[0]] = arr[1];
				item.border = obj;
				return item;
			});
			console.log('tempItem:', tempItem);
		}
		const data: Array<Record<string, any>> | null = props.pageData[FieldItem.value?.attrs.arrayBind];
		if (FieldItem.value?.attrs.showCount.all) {
			doptions.push(...(data || []));
		} else {
			if (data?.length && data?.length > FieldItem.value?.attrs.showCount.count) {
				const newData = data.slice(0, FieldItem.value?.attrs.showCount.count);
				doptions.push(...(newData || []));
			} else {
				doptions.push(...(data || []));
			}
		}
	}
}

const formatMessageCardValue = async () => {
	FieldItem?.value!.attrs.attrs.forEach((item: Record<string, any>) => {
		const value = calcFieldValue(4, item.value, props.inputData, props.pageData, props.globalData);
		item.value = [undefined, NaN, null, ''].includes(value) ? item.value : value;
	});
	proxy!.$forceUpdate();
};
</script>

<style lang="scss" scoped>
.card_list {
	width: 100%;
	background: #fff;
	box-shadow: 0 4px 8px 0 rgb(3 32 255 / 10%);
	border-radius: 10px;
	padding: 16px 15px;
	margin: 0 15px;
	margin-bottom: 15px;
}
</style>
